<template lang="pug">
.prev-area.mb-3
  .cover-bg(:style="coverSize")
    .num-width-1 {{form.length}}
    .num-width-2 {{form.length-2*form.border}}
    .num-width-3 {{form.cover}}
//- .px-4.mb-4
//-   .switch-btn
//-     .btn(v-for="item in typeList" :key="item" @click="activeType=item" :class="[item==activeType?'active':'']") {{item}}
.px-4.form
  .divider.my-6.mx-auto
  .flex.items-center.mb-3
    .title 毛巾尺寸
    .flex-1
    //- .option-btn(@click="openPopup") 输入毛巾尺寸
  .grid.grid-cols-2.gap-4.pl-4
    .item-col-2
      view.label.text-prim.w-12.text-right 长
      uni-easyinput(size="small" primaryColor="#B59E6D" :clearable="false" type="digit" v-model="form.length")
    .item-col-2
      view.label.text-prim.w-12.text-right 宽
      uni-easyinput(primaryColor="#B59E6D" :clearable="false" type="digit" v-model="form.width")
    .item-col-2
      view.label.text-prim.w-12.text-right 重量
      uni-easyinput(primaryColor="#B59E6D" :clearable="false" type="digit" v-model="form.width")
    .item-col-2
      view.label.text-prim.w-12.text-right 厚度
      uni-easyinput(primaryColor="#B59E6D" :clearable="false" type="digit" v-model="form.width")
  .divider.my-6.mx-auto

  .flex.gap-4.items-start
    .title.pt-1 材质
    .flex-1
      .flex.items-center.mb-3
          picker.w-full(mode="selector" :range="mianliaoList" @change="mianliaoChange" range-key="name")
            view.add-btn(v-if="form.mianliao") {{ form.mianliao.name}}
            view.add-btn(v-else)  点击选择面料 
      //- .flex.items-center.mb-3
      //-     picker.w-full(mode="selector" :range="tianchongList" @change="tianchongChange" range-key="name")
      //-       .add-btn 默认填充物

  .divider.my-6.mx-auto
  
  .flex.gap-4.items-start
    .title 工艺
    
    .flex-1
      .flex.items-center.mb-3(v-for="(item, i) in form.gongyi" :key="i" range-key="name")
        .add-btn {{item.name }}
        .w-12.flex.justify-end.items-center(@click="delGongyi(i)")
          uni-icons(size="32" type="minus-filled" color="#B59E6D")
      .flex.items-center.mb-3
        .flex-1
          .add-btn(@click="openGongyiPopup") 添加工艺
        //- picker(mode="multiSelector" range-key="name" :range="gongyiTypePicker" @columnchange="gongyiColsChange"  @change="gongyiPickerChange" )
        //- .w-12.flex.justify-end.items-center
        //-   uni-icons(size="32" type="plus-filled" color="#013A40")
    
  .divider.my-6.mx-auto
  .flex.gap-4.items-center.mb-4
    .title 包装
    uni-easyinput(primaryColor="#B59E6D" :clearable="false" disabled :value="'大货包装'")
  .flex.gap-4.items-center.mb-4
    .title 数量
    uni-easyinput(primaryColor="#B59E6D" :clearable="false" placeholder="请输入" type="digit")
  .flex.gap-4.items-start.mb-4
    .title.pt-1 备注
    .grid.grid-cols-3.gap-3.flex-1
      .pic-preview(v-for="(img,i) in picsTemp" :key="img")
        image.w-full.h-full(:src="img" mode="aspectFit")
        .del-btn(@click="deletPic(i)")
          image.w-full.h-full(src="@/assets/delete.svg" mode="aspectFit")

      .pic-add-btn(@click="addPic")
        image.w-8.h-8(src="@/assets/attach.svg" mode="aspectFit")

  .pl-14
    uni-easyinput(primaryColor="#B59E6D" v-model="form.comment" :clearable="false" placeholder="特殊工艺请留言备注" type="textarea")
.w-full.mt-8.px-6(v-if="props.baojiaInfo?.baojiaName")
  .flex.justify-center.mb-3
    button.sub-btn.flex-1(@click="toBaojiaDetail()") 添加至报价单
  .hint 添加至报价单：{{props.baojiaInfo?.baojiaName}}
.flex.justify-center.w-full.mt-8.px-6.gap-6(v-else)
  button.submit-btn.flex-1(@click="submit()") 立即报价

.h-32
uni-popup(ref="popup" type="center") 
  .popup
    .flex.font-medium.mb-2.text-base.justify-between
      .flex-1 请输入枕芯尺寸
      uni-icons(type="closeempty"  color="dedede" size="24" @click.stop="closePopup()")
    .grid.grid-cols-2.gap-4.form.mb-8
      .item-col-2
        view.label.text-prim.w-6 长
        uni-easyinput(primaryColor="#B59E6D" :clearable="false" type="digit" v-model="OtherSize.length")
      .item-col-2
        view.label.text-prim.w-6 宽
        uni-easyinput(primaryColor="#B59E6D" :clearable="false" type="digit" v-model="OtherSize.height")
    .flex.justify-end
      button.option-btn(@click="GetOtherSize(`xl`)") 确定
uni-popup(ref="gongyiPopup" type="bottom") 
  .popup-bottom
    .flex.font-medium.mb-8.text-base.justify-between
      .flex-1 添加工艺
      uni-icons(type="closeempty"  color="dedede" size="24" @click.stop="closeGongyiPopup()")
    .flex
      view
        .list-btn(v-for="(item,i) in gongyiList" :key='item.id' @click="gongyiColsChange(i)"
        :class="{'selected':(item===gongyiSubSelect)}") 
          .content {{item.name}}
      .list-row
          .w-full.grid.grid-cols-2.gap-2
            template(v-if="gongyiSubSelect && gongyiSubSelect.sub")
              .goods-card(v-for="item in gongyiSubSelect.sub" :key="'sub'+item.id" @click="gongyiPickerChange(item)"
                :class="{'selected':(gongyiPickerSelect===item)}")
                view.mb-2(class="h-[20vw] w-[23vw]")
                  //- image.w-full.h-full(:src="item.pic" mode="aspectFit")
                .title {{item.name}}
    .flex.justify-end.mt-8.mb-16
      button.submit-btn.w-32(@click="submitGongyi") 确定
</template>
<script setup>
import { defaultParam,selectProductMaterial,selectProductMaterialWithDetail,selectProductProcessWithDetail,GetSize,Quote } from "@/api/common.js";
const props = defineProps({
  baojiaInfo:Object
})
const PageId = computed(()=>props.baojiaInfo?.id)
// const typeList = [
//   "飞边款", "双枕", "压条工艺"
// ]
const form = reactive({
  length: 100,
  width: 50,
  border:null,
  cover:null,

  mianliao:null,
  tianchong:null,
  gongyi:[],

  comment:""
})

 
const coverSize = computed(() => {
  let _asp = form.length/form.width;
  _asp = _asp || 1.5;
  let asp = Math.max(Math.min(_asp, 2), 0.5) // clamp function
  
  const style = {
    'aspect-ratio': asp,
  }
  if(form.width>=form.length){
    style.height = "70vw"
  }else{
    style.width = "85vw"
  }
  return style
})
// const activeType = ref('飞边款')
 
const mianliaoList = ref([]);
const tianchongList = ref([]);
const gongyiList = ref([]);

const ProductMaterialList = ref([])

onMounted(()=>{
  console.log(props.baojiaInfo);
  getDefaultParam();
  getData1();
  // getData2();
  getData3();
})

async function getDefaultParam(){
  const res = await defaultParam({
    id:PageId.value,
  })
  Object.assign(form,res.data.size);

}
async function getData1(){ //面料
  const res = await selectProductMaterial({
    productId:PageId.value,
    materialType:1,
  })  
  mianliaoList.value = res.rows;
  form.mianliao = mianliaoList.value[0]
}
async function getData2(){ // 填充物
  const res = await selectProductMaterialWithDetail({
    productId:PageId.value,
    materialType:2
  })
  tianchongList.value = res.rows;
  form.tianchong = tianchongList.value[0]
}
async function getData3(){ // 工艺
  const res = await selectProductProcessWithDetail({
    productId:PageId.value
  })
  gongyiList.value = res.rows;
  gongyiColsChange(0);
}

function mianliaoChange(ev){
  form.mianliao = mianliaoList.value[ev.detail.value]
}
function tianchongChange(ev){
  form.tianchong = tianchongList.value[ev.detail.value]
}

// pictrues
const picsTemp = ref([])
function addPic(){
  uni.chooseImage({
    success(e){
      picsTemp.value.push(e.tempFilePaths)
    }
  })
}
function deletPic(i){
  picsTemp.value.splice(i, 1)
}

async function submit(){
  uni.showLoading();
  const data = {
    type: props.baojiaInfo.name,
    size:{
      length:form.length,
      width:form.width,
      border:form.border,
      cover:form.cover,
    },
    material:[form.mianliao].map(el=>({id:el.id})),
    middleMaterial:[].map(el=>({id:el.id})),
    process:form.gongyi.map(el=>({id:el.id})),
    num:1,
    package:'大货包装',
    comment:form.comment,
  };

  const res = await Quote([data])
  toBaojiaDetail();
  uni.hideLoading();
}
function toBaojiaDetail(){
  uni.redirectTo({
    url:'/pages/state/baojiaSuccess',
  })
}

// ==== gongi pop start ==== 
const gongyiPickerSelect = ref(null);
const gongyiSubSelect = ref(null)
function gongyiColsChange(index){
  gongyiSubSelect.value = gongyiList.value[index]
}

function gongyiPickerChange (item) {
  gongyiPickerSelect.value = item;
}
function submitGongyi(){
  form.gongyi.push(gongyiPickerSelect.value);
  closeGongyiPopup();
  gongyiPickerSelect.value = gongyiList.value[0];
  gongyiSubSelect.value=null;
}
function delGongyi (i) {
   form.gongyi.splice(i, 1)
}

// ====  pop start ==== 
const gongyiPopup = ref(null)
async function openGongyiPopup () {
  gongyiPopup.value.open();
}
function closeGongyiPopup () {
  gongyiPopup.value.close();
}
// ==== pop end ====


const OtherSize = reactive({
length:'',
width:''
})
 async function GetOtherSize(type){
  uni.showLoading();
  const data = {
    type: props.baojiaInfo.name,
    size: {
    type: type,
    length: form.length,
    width: form.width,
    // height: 
    }
  }
  const res = await GetSize(data);
  console.log(res);

  Object.assign(form,res.data)
  closePopup();
  uni.hideLoading();
}
// ==== pop start ==== 
const popup = ref(null)
async function openPopup () {
  popup.value.open();
}
function closePopup () {
  popup.value.close();
}
// ==== pop end ====


</script>
<style scoped lang="scss">
.pic-add-btn{
  @apply flex justify-center items-center border border-focus rounded text-center text-focus py-2 bg-white text-sm w-[24vw] h-[24vw];
}
.pic-preview{
  @apply relative border border-focus rounded text-center text-focus py-2 bg-white text-sm w-[24vw] h-[24vw];
  .del-btn{
    @apply w-6 h-6 opacity-50   bg-red-500 absolute bottom-0 right-0;
  }
}
.add-btn {
  @apply flex-1 border border-focus rounded text-center text-focus py-2 bg-white text-sm;
}

.prev-area {
  @apply h-[80vw] flex justify-center items-center
}

.cover-bg {
  @apply bg-no-repeat transition-all relative;
  background-size: 100% 100%;
  background-image: url('@/static/zhengtao.png');
  .num-width-1,
  .num-width-2,
  .num-width-3{
    @apply absolute font-mono text-lg;
  }
  .num-width-1{
    bottom: 1px;
    right: 47%;
  }
  .num-width-2{
    bottom: 27%;
    right: 43%;
  }
  .num-width-3{
    right: 13%;
    top: 28%;
  }
}

.list-btn{
  @apply w-[25vw] py-4 text-xs text-gray-700 border-transparent;
    .content{
      @apply py-0 text-center  w-full;
      border-left: 4px solid transparent;

    }

  &.selected{
    .content {
      @apply border-prim text-prim font-semibold;
      border-left: 4px solid;
    }
  }
}
.goods-card{
  @apply rounded-md bg-white flex flex-col items-center justify-between p-3 shadow-sm ;
  .title{
    @apply px-4 text-sm text-prim
  }
   &.selected{
      @apply bg-focus text-white;
  }
}
.list-row{
  @apply  flex-1 pr-2  overflow-y-auto h-[55vh];
}
</style>